<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" th:href="@{/favicon.png}"/>
    <link rel="bookmark" th:href="@{/favicon.png}"/>
    <title th:text="${session.user.getUserName()+'-不挂高数社区'}">不挂高数社区</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

    <link rel="stylesheet" href="/css/index.css"/>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js" type="text/javascript"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

    <style type="text/css">
        body {
        / / background-image: url("https://api.isoyu.com/bing_images.php");
            background-color: #efefef;
        }

        .issue-right {
            border-right-style: solid;
            border-right-width: 1px;
            border-right-color: #efefef;
        }
    </style>
    <script type="text/javascript">
        if (window.localStorage.getItem("closable") === "true") {
            window.localStorage.removeItem("closable");
            window.close();
        }
    </script>
</head>
<body>
<!-- 标题栏 使用  fixed-top 将标题栏固定在顶部 -->
<div th:insert="~{navigation :: navbar}"></div>


<div class="container" style="height: 30px">
</div>

<div class="container shadow-sm" style="background-color: white;">
    <div class="content">&nbsp;</div>
    <div class="row">
        <div class="col-3">
            <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab"
                   aria-controls="v-pills-home" aria-selected="true">
                    全部资料
                </a>
                <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab"
                   aria-controls="v-pills-profile" aria-selected="false">
                    修改密码
                </a>
                <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab"
                   aria-controls="v-pills-messages" aria-selected="false">
                    修改头像
                </a>
                <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab"
                   aria-controls="v-pills-settings" aria-selected="false">
                    修改主页封面
                </a>
            </div>

            <br/><br/>
            <h5>
                修改指南
            </h5>
            <br/>
            <p>只有点击提交后才会正式保存！</p>
        </div>
        <div class="col-9">
            <div class="tab-content" id="v-pills-tabContent">
                <!--全部资料-->
                <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel"
                     aria-labelledby="v-pills-home-tab">
                    <!--<form name="user">-->
                    <div class="row">
                        <div class="col-9">
                            <div class="form-group">
                                <label for="userName">昵称：</label>
                                <input readonly="readonly" th:value="${session.user.getUserName()}" autocomplete="off"
                                       type="text" class="form-control" id="userName" aria-describedby="userNameHelp"
                                       placeholder="输入你的昵称！">
                                <small id="userNameHelp" class="form-text text-muted"></small>
                            </div>
                        </div>
                        <div class="col-2">
                            <br/>
                            <button type="button" onclick="removeReadOnly(document.getElementById('userName'), this)"
                                    class="btn btn-success mt-1">修改
                            </button>
                        </div>
                    </div>
                    <!--<div class="form-group">-->
                    <!--<label for="userEmail">邮箱：</label>-->
                    <!--<input type="email" class="form-control" aria-describedby="userEmailHelp" id="userEmail" placeholder="邮箱">-->
                    <!--<small id="userEmailHelp" class="form-text text-muted"></small>-->
                    <!--</div>-->
                    <div class="custom-control custom-radio custom-control-inline">
                        <input class="custom-control-input" type="radio" name="sex" id="boy" value="男">
                        <label class="custom-control-label" for="boy">[[#{index.boy}]]</label>
                    </div>
                    <div class="custom-control custom-radio custom-control-inline">
                        <input class="custom-control-input" type="radio" name="sex" id="girl" value="女">
                        <label class="custom-control-label" for="girl">[[#{index.girl}]]</label>
                    </div>
                    <div class="custom-control custom-radio custom-control-inline">
                        <input class="custom-control-input" type="radio" name="sex" id="don'tNo" value="保密">
                        <label class="custom-control-label" for="don'tNo">[[#{index.dontnosex}]]</label>
                    </div>

                    <div class="row mt-2">
                        <div class="col-9">
                            <div class="form-group">
                                <label for="userSchool">学校</label>
                                <input readonly="readonly" th:value="${session.user.getSchool()}" autocomplete="off"
                                       type="text" class="form-control" id="userSchool" placeholder="学校">
                            </div>
                        </div>
                        <div class="col-2">
                            <br/>
                            <button type="button" onclick="removeReadOnly(document.getElementById('userSchool'), this)"
                                    class="btn btn-success mt-1">修改
                            </button>
                        </div>
                    </div>


                    <div class="row mt-2">
                        <div class="col-9">
                            <div class="form-group">
                                <label for="userMajor">专业</label>
                                <input readonly="readonly" th:value="${session.user.getMajor()}" autocomplete="off"
                                       type="text" class="form-control" id="userMajor" placeholder="专业">
                            </div>
                        </div>
                        <div class="col-2">
                            <br/>
                            <button type="button" onclick="removeReadOnly(document.getElementById('userMajor'), this)"
                                    class="btn btn-success mt-1">修改
                            </button>
                        </div>
                    </div>

                    <div class="row mt-2">
                        <div class="col-9">
                            <div class="form-group">
                                <label for="userSimpleSelfIntroduction">个性签名(50字以内)</label>
                                <input readonly="readonly" th:value="${session.user.getSimpleSelfIntroduction()}"
                                       autocomplete="off" type="text" class="form-control"
                                       id="userSimpleSelfIntroduction" placeholder="个性签名">
                            </div>
                        </div>
                        <div class="col-2">
                            <br/>
                            <button type="button"
                                    onclick="removeReadOnly(document.getElementById('userSimpleSelfIntroduction'), this)"
                                    class="btn btn-success mt-1">修改
                            </button>
                        </div>
                    </div>

                    <div class="row mt-2">
                        <div class="col-9">
                            <div class="form-group">
                                <label for="userSelfIntroduction">简介（500字以内）</label>
                                <textarea readonly="readonly" th:text="${session.user.getSelfIntroduction()}"
                                          autocomplete="off" type="text" class="form-control" id="userSelfIntroduction"
                                          placeholder="简介"></textarea>
                            </div>
                        </div>
                        <div class="col-2">
                            <br/>
                            <button type="button"
                                    onclick="removeReadOnly(document.getElementById('userSelfIntroduction'), this)"
                                    class="btn btn-success mt-1">修改
                            </button>
                        </div>
                    </div>


                    <div class="row mt-2">
                        <div class="col-9">
                            <div class="form-group">
                                <label for="userLike">爱好</label>
                                <input readonly="readonly" th:value="${session.user.getLikes()}" autocomplete="off"
                                       type="text" class="form-control" id="userLike" placeholder="爱好">
                            </div>
                        </div>
                        <div class="col-2">
                            <br/>
                            <button type="button" onclick="removeReadOnly(document.getElementById('userLike'), this)"
                                    class="btn btn-success mt-1">修改
                            </button>
                        </div>
                    </div>


                    <div style="display: none;" id="error-message" class="alert alert-warning" role="alert">
                        A simple warning alert—check it out!
                    </div>
                    <button type="button" class="btn btn-primary" onclick="alterUserData()">提交</button>
                    <!--</form>-->
                </div>

                <!--修改密码-->
                <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
                    <div class="form-group">
                        <label for="newPassword">新密码：</label>
                        <input onclick="closePasswordtips()" type="password" class="form-control" id="newPassword"
                               aria-describedby="newPasswordHelp" placeholder="新密码">
                        <small id="newPasswordHelp" class="form-text text-muted"></small>
                    </div>
                    <div class="form-group">
                        <label for="newPasswordAgain">再输入一遍：</label>
                        <input onclick="closePasswordtips()" type="password" class="form-control" id="newPasswordAgain"
                               aria-describedby="newPasswordAgainHelp" placeholder="再输入一遍">
                        <small id="newPasswordAgainHelp" class="form-text text-muted"></small>
                    </div>
                    <div class="form-group">
                        <label for="oldPassword">旧密码：</label>
                        <input onclick="closePasswordtips()" type="password" class="form-control" id="oldPassword"
                               aria-describedby="oldPasswordHelp" placeholder="旧密码">
                        <small id="oldPasswordHelp" class="form-text text-muted"></small>
                    </div>
                    <div class="row mt-4">
                        <div class="col text-right">
                            <a href="javascript:void(0);">
                                <img title="点击刷新" id="image-captcha" src="/captche/images"
                                     onclick="this.src='/captche/images?'+Math.random()"/>
                            </a>
                        </div>
                        <div class="form-group mr-3">
                            <input onclick="closePasswordtips()" type="text" autocomplete="off" class="form-control"
                                   name="CAPTCHA" id="CAPTCHA"
                                   th:placeholder="#{publish.issue.CAPTCHA}">
                        </div>
                    </div>
                    <div id="password-message" style="display: none;" class="alert alert-danger" role="alert">

                    </div>

                    <button onclick="alterPassword()" type="button" class="btn btn-primary">提交</button>
                </div>

                <!--修改头像-->
                <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
                    <a href="/update/head" class="btn btn-success btn-lg btn-block">点击修改</a>
                </div>
                <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">
                        <div class="form-group">
                            <input type="file" accept="image/*" onchange="changeImage()" class="form-control"
                                   id="file-image" name="editormd-image-file" aria-describedby="fileHelp" placeholder="点击选择文件">
                            <small id="fileHelp" class="form-text text-muted"></small>
                        </div>
                        <p>&nbsp;</p>
                        <div class="content">
                            <img id="show-top-image" width="100%" height="auto"
                                 th:src="${session.user.getUserTopPhotoUrl()}">
                        </div>
                        <p>&nbsp;</p>
                        <div class="content text-right">
                            <button type="button" class="btn btn-success" onclick="uploadImage()">上传</button>
                        </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container" style="height: 30px">
    </div>
</div>


<!-- 页脚 -->
<div th:insert="~{footer :: footer}"></div>


<script src="/js/url.js" type="text/javascript"></script>
<script src="/js/user.js" type="text/javascript"></script>
<script>
    var changeImage = function () {
        console.log("ceshi");
        var obj = document.getElementById("file-image");
        var img = document.getElementById("show-top-image");
        img.src = window.URL.createObjectURL(obj.files[0]);
    };

    function uploadImage() {
        var formData = new FormData();
        var file = document.getElementById("file-image").files[0];
        formData.append("editormd-image-file", file);
        formData.append("type", "top");
        $.ajax({
            url:"/api/file/image/upload",
            type:"POST",
            data:formData,
            processData : false,
            contentType : false,
            enctype: "multipart/form-data",
            async : false,
            success : function (result) {
                //成功后的回调事件
                if(result.success == 1) {
                    alert("上传成功！")
                    window.location.reload();
                } else {
                    alert(result.message);
                    window.location.reload();
                }
            }
        })
    }
</script>
</body>
</html>
